<template>
	<view class="bt">
		<view class="plr-36 ptb-20 bb">
			<view class="bold mt-15">
				{{info.title}}
			</view>
			<view class="flex mt-15">
				<view class="size-26 red">
					<text class="size-36">{{info.integral}}</text>
				</view>
				<u-number-box v-model="data.number" :min="1"></u-number-box>
			</view>
		</view>
		<view class="w100" style="height: 20rpx;background: #f8f8f8;"></view>
		<view class="ptb-20">
			<view class="plr-36 size-34 bold">
				联系信息
			</view>
			<u-field v-model="data.name" label="姓名:" placeholder="必填" v-show="address_id"></u-field>
			<u-field v-model="data.mobile" label="联系电话:" placeholder="必填" v-show="address_id"></u-field>
			<view class="flex pd-30 bb" @click="goAddress">
				<view class="flex_l">
					<view>联系地址：</view>
					<view class="u-flex-1">
						<view>{{data.address}}</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
		</view>
		<view class="fixed-bottom plr-36 bg-white flex" style="box-shadow: 0px -2px 6px rgba(238, 238, 238, 0.68);">
			<view class="red">
				<text class="size-36">{{price}}</text>
				<text class="size-22">积分</text>
			</view>
			<view class="bold bg-yellow ptb-9 plr-20 radius-10 white" @click="goPay">
				立即兑换
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				address_id: null,
				info: {},
				data: {
					integral_goods_id: '',
					number: 1,
					name: '',
					mobile: '',
					address: '',
					lng: 0,
					lat: 0
				},
			};
		},
		computed: {
			...mapState(["userInfo"]),
			price() {
				return (this.data.number * this.info.integral).toFixed(2)
			}
		},
		onUnload() {
			uni.$off('address_id');
		},
		onLoad(option) {
			this.data.integral_goods_id = option.goods_id
			this.init()
		},
		mounted() {
			let _this = this;
			uni.$on('address_id', function(id) {
				_this.address_id = id;
			})
		},
		onShow() {
			if (this.address_id) {
				this.$http('/api/address/detail', {
					id: this.address_id
				}).then(data => {
					this.data.name = data.name;
					this.data.mobile = data.mobile;
					this.data.address = data.address + data.corridor;
					this.data.lat = data.lat;
					this.data.lng = data.lng;
				});
			}
		},
		methods: {
			init() {
				this.$http('/api/integralgoods/detail', {
					id: this.data.integral_goods_id
				}).then(data => {
					this.info = data
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '/pages/my/address/list?is_return=1'
				})
			},
			goPay() {
				if (!this.data.name) {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none'
					})
				} else if (!this.data.mobile) {
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none'
					})
				} else {
					this.subApi()
				}
			},
			subApi() {
				this.$http('/api/integralorder/add', this.data, "POST").then(data => {
					uni.showToast({
						title: '兑换成功',
						icon: 'success'
					});
					setTimeout(function () {
						uni.navigateBack({})
					}, 1500);
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-field .u-label-text {
		font-weight: 400 !important;
	}

	/deep/.u-cell_title {
		font-weight: 400 !important;
	}

	/deep/.u-cell__value {
		color: $yellow;
	}

	/deep/.u-radio__label {
		font-size: 26rpx;
	}

	.img-shop {
		image {
			width: 34rpx;
			height: 34rpx;
		}
	}

	.img-tisp {
		image {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.radio {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1rpx solid #999;

		.radio-circle {
			width: 22rpx;
			height: 22rpx;
			background: $yellow;
			border-radius: 50%;
		}
	}

	.fixed-bottom {
		height: 96rpx;
	}
</style>
